import React, { Fragment } from 'react';
import { Row, Divider } from 'antd';

const DividerContainer = ({ children, type = 'vertical', dividerProps, ...rest }) => {
    const childList = React.Children.map(children || [], (item, index) => ({ ...item, key: index })).filter(item =>
        React.isValidElement(item)
    );

    let typeProps = null;
    if (type === 'vertical') {
        typeProps = { type: 'flex' };
    }

    if (childList?.length > 0) {
        return (
            <Row {...typeProps} align="middle" {...rest}>
                {childList.map((item, index) => (
                    <Fragment key={item.key}>
                        {item}
                        {index < childList.length - 1 && <Divider type={type} {...dividerProps} />}
                    </Fragment>
                ))}
            </Row>
        );
    }

    return null;
};

export default DividerContainer;
